<template>
	<view class="form-area">
		<u--form labelPosition="top" labelWidth="200" :model="form" :rules="rules" ref="uForm">
			<u-form-item required label="问题类型:" prop="typeArr">
				<u-checkbox-group :customStyle="{flexWrap: 'wrap'}" style="flex-wrap: wrap !important;width: 100%;"
					v-model="form.typeArr" shape="square" @change="changeCheckbox">
					<u-checkbox :customStyle="{marginRight: '10px',marginTop: '20rpx'}"
						v-for="(item, index) in projectType" :key="index" :label="item.dictLabel"
						:name="item.dictValue">
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item v-if="showProject" required label="项目编号:" prop="projectId">
				<u--input disabled placeholder="请选择项目" v-model="form.projectId">
					<template slot="suffix">
						<u-button @tap="toProject" text="选择" type="success" size="small"></u-button>
					</template>
				</u--input>
			</u-form-item>
			<u-form-item required label="问题标题:" prop="title">
				<u--input placeholder="请输入问题标题" maxlength="100" v-model="form.title"></u--input>
			</u-form-item>
			<u-form-item required label="问题描述:" prop="description">
				<u--textarea :height="150" v-model="form.description" maxlength="500" count
					placeholder="请输入问题描述"></u--textarea>
			</u-form-item>
		</u--form>
		<view style="padding: 40rpx 0;">
			<u-button shape='circle' class="sub-btn" type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		addQuestion,
		getDicts
	} from '@/utils/api.js'

	export default {
		data() {
			return {
				form: {
					projectId: undefined,
					type: undefined,
					typeArr:[],
					title: undefined,
					description: undefined,
				},
				rules: {
					typeArr: [{
						type: 'array',
						required: true,
						message: "问题类型不能为空",
						trigger: "change"
					}],
					projectId: [{
						required: true,
						message: "项目编号不能为空",
						trigger: "blur"
					}],
					title: [{
						required: true,
						message: "问题主题不能为空",
						trigger: "blur"
					}],
					description: [{
						required: true,
						message: "问题描述不能为空",
						trigger: "blur"
					}],
				},
				projectType: [],
				showProject: false
			}
		},
		onLoad() {
			this.init()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			init() {
				//问题类型
				getDicts('wtlx').then(res => {
					this.projectType = res.data
				})
			},
			//选择问题类型
			changeCheckbox(e) {
				if (e.includes('0')) {
					this.showProject = true
				} else {
					this.showProject = false
				}
				this.form.type=e.toString()
			},
			//选择项目回调
			getProjectId(id) {
				this.form.projectId = id
			},
			//跳转选择项目
			toProject() {
				uni.navigateTo({
					url: '/pages_two/problem/company/chooseProject'
				})
			},
			submit() {
				console.log('this.form: ', this.form);
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title: '提交中'
					});
					addQuestion(this.form).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '提交成功！',
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}).catch(errors => {
					console.log('errors: ', errors);
					uni.$u.toast('请完善必填项！')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-area {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx 30rpx 30rpx;
	}
</style>